<template>
    <div class="warehouse-details">
        <el-drawer v-model="dialogVisible" title="仓库详情" size="1200px" :with-header="false" direction="rtl">
            <div class="drawer-header">
                <div class="title">{{ dialogRow.warehouse_name  }}</div>
                <!-- <el-button plain @click="dialogVisible = false">
                    <el-icon>
                        <Close />
                    </el-icon>
                </el-button> -->
            </div>

            <div class="drawer-content">
                <div class="tab-header">
                    <div class="warehouse-info">
                        <div class="info-item">
                            <div class="label">盘点名称</div>
                            <div class="value">{{ dialogRow.name   }}</div>
                        </div>
                        <div class="info-item">
                            <div class="label">盘点仓库</div>
                            <div class="value">{{ dialogRow.warehouse_name  }}</div>
                        </div>
                        <div class="info-item">
                            <div class="label">状态</div>
                            <div class="value">{{ dialogRow.status == 0 ? '待提交' : dialogRow.status == 1 ? '审核中' : dialogRow.status == 2 ? '审核完成' : '审核拒绝' }}</div>
                        </div>
                        <div class="info-item">
                            <div class="label">备注</div>
                            <div class="value">{{ dialogRow.note}}</div>
                        </div>
                        <div class="info-item">
                            <div class="label">创建人</div>
                            <div class="value">{{ dialogRow.manager_name  }}</div>
                        </div>
     
                        <div class="info-item">
                            <div class="label">创建时间</div>
                            <div class="value">{{ dialogRow.created_at  }}</div>
                        </div>
                
                    </div>
                </div>

                <div class="tab-container">
                    <el-tabs v-model="activeTab">
                        <el-tab-pane label="盘点产品" name="basic">
                            <div class="product-tab">
                                <!-- <div class="product-search">
                                    <el-input
                                        v-model="searchKeyword"
                                        placeholder="产品名称/规格型号"
                                        clearable
                                        prefix-icon="el-icon-search"
                                        @input="filterProductList"
                                        style="width: 260px; margin-bottom: 12px;"
                                    />
                                </div> -->
                                <el-table
                                    :data="dialogRow.stock_check_items"
                                    border
                                    style="width: 100%;"
                                    header-cell-class-name="table-header"
                                    cell-class-name="table-cell"
                                >
                                    <el-table-column prop="product_name" label="产品名称" align="center" />
                                    <el-table-column prop="specification" label="规格型号" align="center" />
                                    <el-table-column prop="open_unit_name" label="单位" align="center" />
                      
                                    <el-table-column prop="book_num" label="账面数量" align="center" />
                                    <el-table-column prop="real_num" label="盘点数量" align="center" />
                                    <el-table-column prop="note" label="备注" align="center" />
                                </el-table>
                            </div>
                        </el-tab-pane>
           
                        <el-tab-pane label="sup聚合报告" name="spuData">
                            <div class="product-tab">
                                <!-- <div class="product-search">
                                    <el-input
                                        v-model="searchKeyword"
                                        placeholder="产品名称/规格型号"
                                        clearable
                                        prefix-icon="el-icon-search"
                                        @input="filterProductList"
                                        style="width: 260px; margin-bottom: 12px;"
                                    />
                                </div> -->
                                <el-table
                                    :data="dialogRow.spu_stat_report"
                                    border
                                    style="width: 100%;"
                                    header-cell-class-name="table-header"
                                    cell-class-name="table-cell"
                                >
                                    <el-table-column prop="spu_name" label="产品名称（SPU）" align="center" />
                                    <el-table-column prop="book_num" label="账面库存量" align="center" />
                                    <el-table-column prop="spu_unit_name" label="单位" align="center" />
                                    <el-table-column prop="real_num" label="实际库存量" align="center" />
                      
                                    <el-table-column prop="diff_num" label="盘库差额" align="center" />
                                    <el-table-column prop="loss_or_gain" label="账实对比" align="center" />
                                </el-table>
                            </div>
                        </el-tab-pane>
           
                        <!-- <el-tab-pane label="审批流程" name="inbound-record">
                            <div class="approval-flow-list">
                                <div
                                    class="approval-group"
                                    v-for="(group, groupIdx) in approvalGroups"
                                    :key="groupIdx"
                                >
                                    <div class="approval-timeline">
                                        <div
                                            v-for="(item, idx) in group"
                                            :key="idx"
                                            class="approval-node"
                                            :class="item.status"
                                        >
                                
                                            <div
                                                class="timeline-line"
                                                :style="{
                                                    top: idx === 0 ? '32px' : '0',
                                                    bottom: idx === group.length - 1 ? '32px' : '0',
                                                    background: idx === group.length - 1 ? 'transparent' : '#e5e6eb'
                                                }"
                                            ></div>
                                  
                                            <div
                                                class="timeline-icon"
                                                :style="{ background: item.statusColor }"
                                            >
                                                <template v-if="item.icon === 'plus'">
                                                    <el-icon><Plus /></el-icon>
                                                </template>
                                                <template v-else-if="item.icon === 'check'">
                                                    <el-icon><Check /></el-icon>
                                                </template>
                                                <template v-else-if="item.icon === 'close'">
                                                    <el-icon><Close /></el-icon>
                                                </template>
                                                <template v-else-if="item.icon === 'minus'">
                                                    <el-icon><Remove /></el-icon>
                                                </template>
                                            </div>
                                      
                                            <div class="node-content">
                                                <div class="node-title" :style="{ color: item.statusColor }">
                                                    {{ item.statusText }}
                                                </div>
                                                <div class="node-info">
                                                    <img class="avatar" :src="item.avatar" />
                                                    <span class="user">{{ item.user }}</span>
                                                    <span class="dept">{{ item.dept }}</span>
                                                    <span class="time">{{ item.time }}</span>
                                                    <span class="remark" v-if="item.remark">{{ item.remark }}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                      
                                    <div v-if="groupIdx < approvalGroups.length - 1" class="group-divider"></div>
                                </div>
                            </div>
                        </el-tab-pane> -->
                        <!-- <el-tab-pane label="操作记录" name="inventory">
                            <div class="inventory-content">
                                <div class="operation-list">
                                    <div class="operation-item" v-for="item in operationList" :key="item.id">
                                        <img class="avatar" :src="item.avatar" alt="avatar" />
                                        <span class="user">{{ item.user }}</span>
                                        <span class="warehouse">{{ item.warehouse }}</span>
                                        <span class="time">{{ item.time }}</span>
                                        <span class="desc">
                                            {{ item.action }}
                                            <span class="order-link" @click="handleOrderClick(item.orderNo)">
                                                《{{ item.orderNo }}》
                                            </span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </el-tab-pane>
          -->
                    </el-tabs>
                </div>
            </div>
        </el-drawer>

       
    </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { ArrowDown, Close, Search, RefreshRight, Download, Plus, Expand, Fold, Check, Remove } from '@element-plus/icons-vue';
import api from '@/api';

const props = defineProps({
    dialogVisible: {
        type: Boolean,
        default: false
    },
    dialogRow: {
        type: Object,
        default: () => ({})
    },
    productList: {
        type: Array,
        default: () => []
    }
});

const emit = defineEmits(['update:dialogVisible']);

const dialogVisible = computed({
    get: () => props.dialogVisible,
    set: (val) => emit('update:dialogVisible', val)
});

watch(dialogVisible, (newVal) => {
    if (newVal) {
        console.log(props.dialogRow, 'props.dialogRow');
        // getDetailsData();
    }
});


const getDetailsData = async () => {
    const res = await api.product.stock_check_detail({ id: props.dialogRow.id });
    if (res.code === 200) {
        console.log(res.data, 'res.data');
    }
}

const activeTab = ref('basic');





const operationList = [
    {
        id: 1,
        avatar: 'https://api.dicebear.com/7.x/miniavs/svg?seed=1', // 可换成真实头像
        user: '张珊珊',
        warehouse: '仓库',
        time: '2023-12-01 13:32',
        action: '新增了入库单',
        orderNo: 'CGRK2402010002'
    }
    // 可继续添加更多记录
];

function handleOrderClick(orderNo: string) {
    // 这里可跳转详情页或弹窗
    // 例如：router.push(`/inbound/detail/${orderNo}`)
    // 或 emit('viewOrder', orderNo)
    console.log('点击了单号', orderNo);
}

const searchKeyword = ref("");
const filteredProductList = computed(() => {
    if (!searchKeyword.value) return props.productList;
    return props.productList.filter((item: any) =>
        (item.name && item.name.includes(searchKeyword.value)) ||
        (item.spec && item.spec.includes(searchKeyword.value))
    );
});

function filterProductList() {
    // Implementation of filterProductList function
}

const approvalGroups = ref([
    [
        {
            status: 'start', // 发起申请
            statusText: '发起申请',
            statusColor: '#6860FF',
            icon: 'plus',
            user: '张珊珊',
            avatar: 'https://api.dicebear.com/7.x/miniavs/svg?seed=1',
            dept: '生产部',
            time: '2023-12-01 13:32',
            remark: ''
        },
        {
            status: 'pass', // 审批通过
            statusText: '审批通过',
            statusColor: '#4F9BFA',
            icon: 'check',
            user: '李四',
            avatar: 'https://api.dicebear.com/7.x/miniavs/svg?seed=2',
            dept: '生产部',
            time: '2023-12-01 13:32',
            remark: '同意'
        },
        {
            status: 'reject', // 审批拒绝
            statusText: '审批拒绝',
            statusColor: '#FF4D4F',
            icon: 'close',
            user: '王理',
            avatar: 'https://api.dicebear.com/7.x/miniavs/svg?seed=3',
            dept: '财务部',
            time: '2023-12-01 13:32',
            remark: '金额有问题，请调整。'
        }
    ],
    [
        {
            status: 'start',
            statusText: '发起申请',
            statusColor: '#6860FF',
            icon: 'plus',
            user: '张珊珊',
            avatar: 'https://api.dicebear.com/7.x/miniavs/svg?seed=1',
            dept: '生产部',
            time: '2023-12-01 13:32',
            remark: '金额已经调整。'
        },
        {
            status: 'pass',
            statusText: '审批通过',
            statusColor: '#4F9BFA',
            icon: 'check',
            user: '李四',
            avatar: 'https://api.dicebear.com/7.x/miniavs/svg?seed=2',
            dept: '生产部',
            time: '2023-12-01 13:32',
            remark: '同意'
        },
        {
            status: 'pending', // 审批中
            statusText: '审批中',
            statusColor: '#FFA940',
            icon: 'minus',
            user: '王理',
            avatar: 'https://api.dicebear.com/7.x/miniavs/svg?seed=3',
            dept: '财务部',
            time: '2023-12-01 13:32',
            remark: ''
        }
    ]
]);
</script>

<style lang="scss" scoped>
::v-deep .inventory-layout .product-category .category-list .el-menu-item.is-active {
    color: #6860FF !important;
    background-color: #6860ff15 !important;

}


//表格样式
::v-deep .product-list {
    .el-table {
        --el-table-header-bg-color: rgba(235, 236, 240, 1);

        th {
            color: #444;
            font-weight: bold;
        }
    }

}

//表格样式
::v-deep .inbound-list {
    .el-table {
        --el-table-header-bg-color: rgba(235, 236, 240, 1);

        th {
            color: #444;
            font-weight: bold;
        }
    }


}

//分页样式
.pagination {
    width: calc(100% - 1000px);
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding-top: 10px;

}


.warehouse-details {
    .drawer-header {
        padding: 16px 20px;
        border-bottom: 1px solid #E4E7ED;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .title {
            font-size: 16px;
            font-weight: bold;
            color: #333;
        }
    }

    .drawer-content {
        height: calc(100% - 60px);
        overflow-y: auto;

        .tab-header {
            padding: 20px;
            background-color: #F5F7FA;

            .warehouse-info {
                display: flex;
                flex-wrap: wrap;
                gap: 16px;

                .info-item {
                    min-width: 120px;
                        font-size: 14px;

                    .label {
                        color: #909399;
                        margin-right: 8px;
                        margin-bottom: 4px;
                    }

                    .value {
                        color: #333;
                        font-weight: 500;
                        font-size: 14px;
                    }
                }
            }
        }

        .tab-container {
            padding: 20px;

            :deep(.el-tabs__header) {
                margin-bottom: 20px;
            }
        }

        .info-section {
            margin-bottom: 24px;

            .section-title {
                background-color: #F5F7FA;
                padding: 12px 10px;
                display: flex;
                align-items: center;
                gap: 8px;
                margin-bottom: 16px;
                font-size: 14px;
                font-weight: bold;
                color: #333;

                .el-icon {
                    font-size: 16px;
                    color: #626aef;
                }
            }

            .info-grid {

                padding: 16px;
                border-radius: 4px;

                .info-row {
                    display: flex;
                    margin-bottom: 16px;

                    &:last-child {
                        margin-bottom: 0;
                    }

                    .info-col {
                        flex: 1;
                        display: flex;
                        align-items: center;

                        &.full-width {
                            flex: 2;
                        }

                        .label {
                            width: 80px;
                            color: #909399;
                            flex-shrink: 0;
                            margin-left: 10px;
                        }

                        .value {
                            color: #333;
                            flex: 1;
                            display: inline-block;
                            padding: 6px;
                            font-size: 14px;
                            background-color: #F5F7FA;
                        }
                    }
                }
            }
        }
    }
}

:deep(.el-drawer) {
    .el-drawer__body {
        padding: 0;
    }
}

:deep(.el-tabs__nav-wrap::after) {
    height: 1px;
}

:deep(.el-tabs__active-bar) {
    background-color: #626aef;
}

:deep(.el-tabs__item.is-active) {
    color: #626aef;
}

:deep(.el-tabs__item:hover) {
    color: #626aef;
}

.search-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;

    .right-buttons {
        display: flex;
        gap: 8px;
    }

    .filter-buttons {
        margin-left: 16px;
    }
}

.product-list,
.inbound-list,
.record-list {
    margin-bottom: 16px;
}

.pagination {
    display: flex;
    justify-content: flex-end;
    padding: 16px 0;
}

:deep(.el-table) {
    --el-table-header-bg-color: #F5F7FA;

    th {
        background-color: var(--el-table-header-bg-color);
        color: #606266;
        font-weight: 500;
    }
}

:deep(.el-button) {
    &.is-plain {
        &:hover {
            color: #626aef;
            border-color: #626aef;
        }
    }
}

:deep(.el-radio-button__orig-radio:checked + .el-radio-button__inner) {
    background-color: #626aef;
    border-color: #626aef;
    box-shadow: -1px 0 0 0 #626aef;
}

.inventory-layout {
    display: flex;
    height: 100%;

    .product-category {
        width: 200px;
        border-right: 1px solid var(--el-border-color-light);
        transition: width 0.3s;
        background-color: rgb(245, 247, 249);
        padding: 0px 12px;
        margin-right: 10px;

        &.is-collapsed {
            width: 0;
            overflow: hidden;
        }

        .category-header {
            padding: 12px 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid var(--el-border-color-light);

            .header-title {
                display: flex;
                align-items: center;
                gap: 90px;
                justify-content: space-between;
                font-size: 14px;
                font-weight: 500;
            }
        }

        .category-search {
            padding: 12px;
            border-bottom: 1px solid var(--el-border-color-light);
        }

        .category-list {
            .el-menu {
                border-right: none;
            }

            .el-menu-item {
                height: 40px;
                line-height: 40px;

                &.is-active {
                    background-color: var(--el-color-primary-light-9);
                    color: var(--el-color-primary);
                }
            }
        }
    }

    .product-content {
        flex: 1;

        transition: margin-left 0.3s;

        &.is-expanded {
            margin-left: 0;
        }

        .search-bar {
            margin-bottom: 16px;
        }
    }
}

// 表格样式优化
.product-list {
    :deep(.el-table) {
        --el-table-header-bg-color: #F5F7FA;

        th {
            background-color: var(--el-table-header-bg-color);
            color: #606266;
            font-weight: 500;
        }
    }
}

.accordion-item {
    border-radius: 4px;
    background: rgb(244, 245, 247);
    margin-bottom: 16px;


    overflow: hidden;
}

.accordion-header {
    display: flex;
    align-items: center;
    padding: 0 20px;
    height: 48px;
    cursor: pointer;
    background: rgb(244, 245, 247);
    margin-bottom: 6px;
    font-size: 15px;
    font-weight: 500;
    color: #333;
    transition: background 0.2s;
    .arrow {
        margin-right: 12px;
        transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
        color: #999;
        &.expanded {
            transform: rotate(90deg);
            color: #626aef;
        }
    }
    &.expanded {
        background: #f5f7fa;
    }
    .main-field {
        margin-right: 32px;
        min-width: 140px;
        white-space: nowrap;
    }
}

.accordion-body {
    padding: 0 0 20px 0;
    background: #fff;
    animation: fadeIn 0.3s;
}

.expand-enter-active, .expand-leave-active {
    transition: max-height 0.3s cubic-bezier(0.4,0,0.2,1), opacity 0.3s;
    overflow: hidden;
}
.expand-enter-from, .expand-leave-to {
    max-height: 0;
    opacity: 0;
}
.expand-enter-to, .expand-leave-from {
    max-height: 500px;
    opacity: 1;
}

.status-un {
    color: #666;
}
.status-part {
    color: #ff9900;
}
.status-all {
    color: #13ce66;
}

.operation-list {
    padding: 16px 0 0 0;
}
.operation-item {
    display: flex;
    align-items: center;
    padding: 12px 0;
    font-size: 15px;
    border-bottom: 1px solid #f5f5f5;
    &:last-child {
        border-bottom: none;
    }
    .avatar {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        object-fit: cover;
        margin-right: 16px;
        background: #f5f7fa;
        border: 1px solid #eee;
    }
    .user {
        color: #333;
        font-weight: 500;
        margin-right: 18px;
    }
    .warehouse {
        color: #666;
        margin-right: 18px;
    }
    .time {
        color: #999;
        margin-right: 24px;
        font-size: 14px;
    }
    .desc {
        color: #333;
        .order-link {
            color: #144b9e;
            cursor: pointer;
            margin-left: 2px;
            &:hover {
                text-decoration: underline;
                color: #3a5fff;
            }
        }
    }
}

.product-tab {
    padding: 0 10px;
}
.product-search {
    margin-bottom: 8px;
}
::v-deep .table-header {
    font-weight: bold;
    background: #fafbfc;
    color: #222;
}
::v-deep .table-cell {
    text-align: center;
}

.approval-flow-list {
    padding: 24px 0 0 0;
}
.approval-group {
    margin-bottom: 32px;
    position: relative;
}
.approval-timeline {
    position: relative;
    margin-left: 32px;
}
.approval-node {
    display: flex;
    align-items: flex-start;
    position: relative;
    min-height: 64px;
}
.timeline-line {
    position: absolute;
    left: -16px;
    width: 2px;
    top: 0;
    bottom: 0;
    background: #e5e6eb;
    z-index: 0;
}
.timeline-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-right: 16px;
    z-index: 1;
    box-shadow: 0 2px 8px #f0f1f2;
}
.node-content {
    flex: 1;
    padding-bottom: 12px;
    border-bottom: 1px solid #f5f5f5;
    margin-bottom: 8px;
}
.node-title {
    font-weight: 500;
    font-size: 16px;
    margin-bottom: 4px;
}
.node-info {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: #666;
}
.node-info .avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 6px;
    border: 1px solid #eee;
}
.node-info .user {
    font-weight: 500;
    color: #333;
}
.node-info .dept {
    color: #888;
}
.node-info .time {
    color: #aaa;
    font-size: 13px;
}
.node-info .remark {
    color: #ff4d4f;
    margin-left: 8px;
}
.group-divider {
    height: 24px;
    border-left: 2px dashed #e5e6eb;
    margin-left: 0px;
}
</style>
